<template>
  <div class="menuTree">
    <!-- <input type="text" v-model="roleName"> -->
    <el-form label-width="90px" class="updateName" :model="formData" ref="formData">
      <el-form-item label="角色名称" prop="roleName" :rules="[{ required: true, message: '请输入角色名称'}]">
        <el-input type="text" v-model="formData.roleName" auto-complete="off" placeholder="请设置角色名称"></el-input>
      </el-form-item>
    </el-form>
    <el-row class="menuTree_header">
      <el-col :span="3">操作对象</el-col>
      <el-col :span="19">权限</el-col>
      <el-col :span="2" @click.native="handleCheckAll()" :class="{checkAll_color:checkAll}">全选</el-col>
    </el-row>
    <div class="menuTree_table">
      <el-row v-for="item in menuList" :key="item.id">
        <el-col :span="3">
          {{item.name}}
        </el-col>
        <el-col :span="19" v-show="item.childList.length>0">
          <el-checkbox-group v-model="item.checkedCities" @change="handleOneCheckedCitiesChange(item)">
            <el-checkbox v-for="m in item.childList" :label="m.id" :key="m.id"> {{m.name}}</el-checkbox>
          </el-checkbox-group>
        </el-col>
        <el-col :span="2" v-show="item.childList.length>0">
          <el-checkbox @click.native="handleOneCheckAll($event,item)" v-model="item.checkAll"></el-checkbox>
        </el-col>
      </el-row>
    </div>

    <el-row class="menuTree_footer">
      <el-col :span="4" :offset="20">
        <el-button type="primary" round @click.native="sure_updateMenu">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getWebMenuList,
  getWebRole,
  updateWebRole
} from '~/api/'
export default {
  props: {
    cur_roleId: {
      type: Number,
      default: 1,
    },
    cur_roleName: {
      type: String,
      default: '',
    },
  },
  watch: {
    cur_roleName: {
      handler: async function (val, oldVal) {
        this.formData.roleName = val
        //请求当前角色下被选中的菜单
        // let res = await getWebRole(this, this.cur_roleId)
        // console.log(res)
        // if (res.code === '0') {
        //   for (var i = 0; i < this.menuList.length; i++) {
        //     for (var j = 0; j < this.menuList[i].childList.length; j++) {
        //       console.log(this.menuList[i].childList[j].id)
        //     }
        //   }
        // } else {
        //   this.$message.error(res.message)
        // }
      },
      deep: true
    }
  },
  data() {
    return {
      menuList: [],
      checkAll: false,
      formData: {
        roleName: ''
      }
    };
  },
  beforeMount() {
    this.res_WebMenuList()
  },
  methods: {
    async res_WebMenuList() { //获取管理后台菜单列表结构
      let res = await getWebMenuList(this)
      if (res.code === '0') {
        this.menuList = res.data.tree
        console.log(this.menuList)
        for (var i = 0; i < this.menuList.length; i++) {
          this.menuList[i].checkedCities = []
        }
      } else {
        this.$message.error(res.message)
      }
    },
    handleOneCheckedCitiesChange: function (item) {
      if (typeof item.checkAll === "undefined") {
        this.$set(item, "checkAll", false);
      }
      item.checkAll = item.checkedCities.length === item.childList.length;
      console.log(item)
    },
    handleOneCheckAll: function (event, item) {
      console.log(event.target.checked)
      let arr = [];
      for (let a = 0; a < item.childList.length; a++) {
        arr.push(item.childList[a].id)
      }

      item.checkedCities = event.target.checked ? arr : [];
      console.log(this.menuList)
    },
    handleCheckAll() {
      this.checkAll = !this.checkAll
      for (let i = 0; i < this.menuList.length; i++) {
        this.checkAll ? this.menuList[i].checkAll = true : this.menuList[i].checkAll = false;
        let arr = []
        for (let j = 0; j < this.menuList[i].childList.length; j++) {
          arr.push(this.menuList[i].childList[j].id)
        }
        this.menuList[i].checkedCities = this.checkAll ? arr : [];
        console.log(this.menuList[i].checkedCities)
      }
      console.log(this.menuList)
    },
    async sure_updateMenu() {
      this.$refs['formData'].validate(async (result) => {
        if (!result) return
        let arr = []
        for (let i = 0; i < this.menuList.length; i++) {
          arr.push(...this.menuList[i].checkedCities)
        }
        let res = await updateWebRole(this, this.cur_roleId, this.formData.roleName, '', '', arr)
        if (res.code === '0') {
          this.$message.success('修改成功')
          // location.reload()
        } else {
          this.$message.error(res.message)
        }
      })

    }
  }
};
</script>

<style lang="scss">
.menuTree {
  .updateName {
    width: 300px;
  }
  &_header {
    color: #999;
    padding: 20px;
    border-bottom: 1px solid #eee;
    .el-col-2 {
      text-align: center;
      cursor: pointer;
    }
    .checkAll_color {
      color: #0070ff;
    }
  }
  &_table {
    .el-row {
      padding: 20px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eee;
      &:hover {
        background: #eee;
        box-shadow: 3px 3px 3px #dedede;
      }
      .el-col {
        font-size: 14px;
      }
      .el-col-2 {
        text-align: center;
        .el-checkbox {
          margin-right: 0;
        }
      }
      .el-col-19 {
        line-height: 25px;
      }
      .el-checkbox__label {
        font-size: 14px;
        color: #000;
      }
      .el-checkbox {
        margin-left: 0;
        margin-right: 30px;
      }
    }
  }
  &_footer {
    margin-top: 100px;
    .el-button.is-round {
      padding: 12px 35px;
    }
  }
}
</style>
